<template>
	<view class="outBox">
		<u-navbar leftText="点单" leftIconColor="#fff" :autoBack="false" bgColor="rgba(0, 0, 0, 0.6)">
			<view class="left-slot" slot="left" @click="backHome">
				<u-icon name="arrow-left" color="#fff"></u-icon>
				<text>{{ '点单' }}</text>
			</view>
		</u-navbar>
		<video :src="videoUrl + '/mp4/1.mp4'" autoplay :controls="false" loop object-fit="cover"></video>
		<view class="innerBox">
			<view class="content" :style="{
			marginTop:menuHeight + 'px',
		}">
				<scroll-view style="height: 100%" :scroll-top="scrollTop" scroll-y="true" class="left">
					<view class="item" :class="[typeIndex == -1 ? 'active' : '']" @click="clickTaoCan">
						<text>套餐</text>
					</view>
					<view class="item" :class="[typeIndex == index ? 'active' : '']" @click="getGoodsList(index)"
						v-for="(item,index) in typeList">
						{{ item.typeName }}
					</view>
				</scroll-view>
				<view class="right">
					<!-- 	<view class="searchBox">
            <u-search placeholder="请输入名称" v-model="searchValue" :showAction="false"></u-search>
          </view> -->
					<scroll-view :scroll-top="scrollTop" scroll-y="true" class="items">
						<!-- 	:style="{
						  backgroundImage:`url(${bg})`
						}" -->
						<view class="item" v-for="item in dataList" @click="handleDetails(item)">
							<image :src="item.productPicPath" mode=""></image>
							<view class="info">
								<view class="title">
									<text>{{ item.productName }}</text>
								</view>
								<view class="price">
									<text>¥ {{ item.productSellingPrice }}</text>
									<view class="operation">
										<!--                    <u-icon name="minus-circle" color="#f96f45" v-if="item.orderNum > 0"-->
										<!--                            @click.stop="handleDecrease(item)" size="22"></u-icon>-->
										<image src="/static/order/icon3.png" v-if="item.orderNum > 0"
											@click.stop="handleDecrease(item)" mode="widthFix" />
										<text v-if="item.orderNum > 0">{{ item.orderNum }}</text>
										<!--                    <u-icon name="plus-circle" color="#f96f45" size="22"-->
										<!--                            @click.stop="handleIncrease(item)"></u-icon>-->
										<image src="/static/order/icon2.png" @click.stop="handleIncrease(item)"
											mode="widthFix" />
									</view>
								</view>
							</view>
						</view>

					</scroll-view>


					<!-- 	<view class="cartBtn" @click="getnav('/pages/order/cart')">
            <view class="circle">
              <text>{{carNum}}</text>
            </view>
            <image src="../../static/order/icon1.png" mode="widthFix"></image>
          </view> -->
				</view>
			</view>
			<view class="footer">
				<view class="left">
					<view class="cart">
						<view class="circle">
							<text>{{ getCartInfo().num || 0 }}</text>
						</view>
						<image src="/static/order/icon4.png" mode="widthFix"></image>
					</view>
					<view class="price">
						<text>¥ {{ getCartInfo().price }}</text>
					</view>
				</view>
				<view class="my-btns">
					<view class="btnOut btn1">
						<view class="btn " @click="handlePay" v-if="actualPayAmount">
							<text>继续支付</text>
						</view>
					</view>
					<view class="btnOut">
						<view class="btn" @click="handleSuc">
							<text>下单结算</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<diaBox ref="diaBoxRef" title="套餐详情" :show-btns="false">
			<template v-slot:dia-cont>
				<view class="diaCont">
					<view class="items">
						<view class="item one">
							<text>套餐</text>
							<text>数量</text>
						</view>
						<view class="item" v-for="item in tcList">
							<text>{{ item.productName }}</text>
							<text>X{{ item.num }}</text>
						</view>
					</view>
				</view>
			</template>
		</diaBox>
		<u-popup :show="showDia" mode="bottom" :custom-style="{
			background:'transparent'
		}" :round="20" @close="showDia = false">
			<view class="diaBoxInner">
				<view class="diaboxTc" :style="{
				backgroundImage:`url(${getImgUrl('/order/diaBg.png')})`
			}">
					<view class="header">
						<view class="left">
							<text>{{ curItem.packageName }}</text>
							<text>SET MENU</text>
						</view>
						<view class="img">
							<image :src="getImgUrl('/order/img1.png')" mode="widthFix"></image>
						</view>
					</view>
					<view class="cont">
						<view class="fiexItem" :style="{
					  backgroundImage:`url(${titleBg})`
				  }">
							<view class="img">
								<image :src="curItem.packagePicPath" mode="widthFix"></image>
							</view>
							<view class="text">
								<view class="tit">{{ curItem.packageName }}</view>
								<view class="desc">{{ curItem.packageProductNames }}</view>
							</view>
						</view>

						<scroll-view scroll-y="true" style="height: 40vh">
							<view class="items">
								<!-- :style="{
											  backgroundImage:`url(${getImgUrl('/order/bg2.png')})`
									}" -->
								<view class="itemInner">
									<view class="item" v-for="(item,index) in curItem.optionalProductNum">
										<view class="title" @click.stop="handleDropDown(index)"
											v-if="kxTcChoice[index] == 0">
											<text>套餐商品{{ index + 1 }}</text>
											<view class="icon">
												<!-- 												<image :src="getImgUrlLocal('/order/arrowDown.png')" style="width: 34rpx;"
													mode="widthFix" /> -->
												<u-icon size="15" color="#fff" name="arrow-down"></u-icon>
											</view>
										</view>
										<view class="title" @click.stop="handleDropDown(index)" v-else>
											<image :src="getCurrentGoodsInfo(kxTcChoice[index]).productPicPath"
												mode="widthFix">
											</image>
											<text>{{ getCurrentGoodsInfo(kxTcChoice[index]).productName }}</text>
											<view class="icon">
												<u-icon size="15" color="#fff" name="arrow-down"></u-icon>
											</view>
										</view>
										<view class="list" v-if="dropDownList.includes(index)">
											<view class="listOne" v-for="(goods,index2) in kxTcList" :key="goods.id"
												:class="getIsChecked(index,goods.id) ? 'active' : ''"
												@click="handleRadio(index,goods.id)">
												<image :src="goods.productPicPath" mode="widthFix"></image>
												<text>{{ goods.productName }}</text>
												<view class="icon">
													<view class="disableBox" v-if="getCurrentDisable(goods,index)"
														@click="showTip(goods)"></view>
													<view class="realRedio">
														<image v-if="!getIsChecked(index,goods.id)"
															:src="getImgUrlLocal('/order/radioNoCheck.png')"
															mode="widthFix" />
														<image v-else :src="getImgUrlLocal('/order/radioIsCheck.png')"
															mode="widthFix" />
													</view>
												</view>
											</view>

										</view>
									</view>
								</view>
							</view>

						</scroll-view>
						<view class="btns">
							<view class="btnOut btnOut2">
								<view class="btn" @click="handleSucTc">
									<text>确定</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<userLogin ref="userLoginRef" />
		<diaBox ref="diaBoxRef2" title="结账" @comfireFunc="confirmPay" :show-btns="true" :show-cancel="true"
			@closeDia="cancelPay" cancelText="取消支付">
			<template #dia-cont>
				<view class="price-text">需要支付<text>{{actualPayAmount}}</text>元</view>
			</template>
		</diaBox>
		<diaBox ref="diaBoxRef1" title="取消支付" content="是否确认取消支付" @comfireFunc="confirmCancelPay" :show-btns="true" :show-cancel="true"></diaBox>
	</view>
</template>

<script>
	import {
		getWXStatusHeight,
		getImgUrlLocal,
		getImgUrl
	} from '@/utils/index.js'

	import bg from "@/static/mine/bg2.png";
	import titleBg from "@/static/order/titleBg.png"
	import {
		getGoodsTypeListApi,
		getGoodsListApi,
		getTCGoodsListApi,
		findDetailListApi,
		getCarListApi,
		orderInfoApi,
		listForPadApi,
		getUnPaidApi,
		cancelPayApi
	} from '../../api/api';
	import diaBox from "@/components/diaBox/index.vue";
	import {
		BaseUrl
	} from "@/utils/staticResource";
	import choice from "@/pages/reservation/choice.vue";

	export default {
		components: {
			diaBox
		},
		data() {
			return {
				titleBg: titleBg,
				bg: bg,
				// 胶囊的宽度
				barWidth: 0,
				barHeight: 0,
				searchValue: '', // 搜索值
				carNum: 0,
				menuHeight: 0,
				// 商品类型列表
				typeList: [],
				// 类型下标
				typeIndex: 0,
				// 商品列表
				dataList: [],
				choiceDataList: [],
				// 桌号
				counterNo: '',
				videoUrl: this.$videoUrl,
				showDia: false,
				tcList: [], // 套餐内容列表
				kxTcList: [], // 可选套餐内容列表
				curItem: {},
				kxTcChoice: [],
				dropDownList: [],
				kxTcListCopy: [],
				sendMsgObj: {}, // socket初始化参数
				payObj: {},
				actualPayAmount: '', // 需要支付的钱
			}
		},
		async onLoad(e) {
			if (e.q) {
				let codeStr = decodeURIComponent(e.q)
				const urlObj = this.getParamobj(codeStr)
				if (!urlObj.counterNo) return this.$toast("counterNo为空")
				this.counterNo = urlObj.counterNo
			}

			if (e.counterNo) this.counterNo = e.counterNo
			let obj = getWXStatusHeight()
			this.barWidth = obj.barWidth + 3
			this.menuHeight = obj.menuHeight
			// uni.removeStorageSync("choiceDataList")
			const isLogin = this.getIsLogin()

			if (isLogin) {
				this.getInitSocketData()
			}

		},
		async onShow() {
			if (this.typeIndex == -1) {
				await this.clickTaoCan()
			}
			console.log(this.sendMsgObj.counterNo, ":this.sendMsgObj.counterNo")
			if (this.sendMsgObj.counterNo) {
				await this.initData()
				this.initWebSocket()
				this.getUnPaidApi()
			}
		},
		methods: {
			getImgUrlLocal,
			getImgUrl,
			// 确认取消支付
			async confirmCancelPay(){
				const res = await cancelPayApi(this.sendMsgObj)
				if(res.code == 200){
					this.actualPayAmount = ''
					uni.showToast({
						title:"取消成功"
					})
					this.$refs.diaBoxRef1.show = false
					this.getUnPaidApi()
				}
			},
			handlePay() {
				this.$refs.diaBoxRef2.show = true
			},
			// 取消支付
			cancelPay() {
				this.$refs.diaBoxRef1.show = true
			},
			// 继续支付
			confirmPay() {
				this.systemWxPay(this.payObj)
			},
			// 查看是否有未支付订单
			async getUnPaidApi() {
				const res = await getUnPaidApi(this.sendMsgObj)
				console.log(res, "res11");
				if (res.code === 200) {
					this.payObj = res.data
					this.actualPayAmount = res.data.actualPayAmount
				}
			},
			systemWxPay(data) {
				const _this = this
				const obj = data.jspackage
				
				wx.requestPayment({
					...obj,
					success(res) {
						if (res.errMsg == "requestPayment:ok") {
							_this.getnav('/pages/order/paySuc/paySuc')
							this.payLoading = false
						}  
					},
					fail(err) {
						console.log(err,"err");
						_this.payLoading = false
					}
				})
			},
			// 点击确认
			handleSucTc() {
				// 校验是否都选择了
				for (let i = 0; i < this.kxTcChoice.length; i++) {
					if (this.kxTcChoice[i] == 0) {
						uni.$u.toast(`请选择套餐${i + 1}商品`)
						return
					}
				}
				// 如果都选择了，要把这些商品添加到choice列表
				const datas = []
				this.kxTcChoice.forEach(item => {
					datas.push(this.kxTcListCopy.find(arr => arr.id == item))
				})

				const newArr = []
				datas.forEach(item => {
					const obj = {
						"orderChannel": 1,
						"relaType": 4,
						"relaId": item.id,
						"serviceId": this.curItem.id, // 套餐的id
						"orderNum": 1,
						"unitPrice": 0,
						"totalPrice": 0,
					}
					const findObj = newArr.find(arr => arr.relaId == obj.relaId)

					if (!findObj) {
						newArr.push(obj)
					} else {
						findObj.orderNum += 1
						findObj.totalPrice += item.productSellingPrice
					}
				})

				this.choiceDataList.push(...newArr)


				// 单独把套餐加进去
				this.choiceDataList.push({
					"orderChannel": 1,
					"relaType": 2,
					"relaId": this.curItem.id,
					"serviceId": -1,
					"orderNum": 1,
					"unitPrice": this.curItem.productSellingPrice,
					"totalPrice": this.curItem.productSellingPrice,
				})
				this.showDia = false

				// 把商品数量加1
				this.dataList.forEach(item => {
					if (item.id == this.curItem.id) {
						item.orderNum += 1
					}
				})

				// 发送购物车数据
				this.sendMsgObj = {
					...this.sendMsgObj,
					"counterOrderFlowDetailList": this.choiceDataList
				}

				uni.sendSocketMessage({
					data: JSON.stringify(this.sendMsgObj),
				})
			},
			showTip(goods) {
				console.log(goods, "goods");
				if (goods.productStock == 0) {
					uni.$u.toast("库存不足")
				}
			},
			// 判断库存是否充足
			getCurrentDisable(goods, index) {
				let stock = goods.productStock
				if (this.kxTcChoice[index] == goods.id) stock += 1
				return !(stock > 0)
			},
			getCurrentGoodsInfo(id) {
				return this.kxTcList.find(item => item.id == id)
			},
			handleDropDown(index) {
				const i = this.dropDownList.findIndex(item => item == index)
				if (i == -1) {
					this.dropDownList.push(index)
				} else {
					this.dropDownList.splice(i, 1)
				}
			},
			// 获取socket初始化连接参数
			async getInitSocketData() {
				const res = await orderInfoApi(this.counterNo)
				if (res.code === 200) {
					this.sendMsgObj = {
						...res.data
					}
					this.getUnPaidApi()
					this.initWebSocket()
					await this.initData()
				}
			},
			getUrlStartsWithHttps(url) {
				return url.startsWith('https')
			},
			// socket建立连接
			initWebSocket() {
				// 去除http
				const url = BaseUrl.replace(/^(https?:\/\/)/, '')
				const token = uni.getStorageSync("token")
				// 判断当前url是https还是http

				const head = this.getUrlStartsWithHttps(BaseUrl) ? 'wss' : 'ws'

				const socket = uni.connectSocket({
					url: head + '://' + url + 'websocket/cart?Authorization=' + token + '&counterOrderNo=' + this
						.sendMsgObj.counterOrderNo + '&counterDetailId=' + this.sendMsgObj.counterDetailId +
						'&counterNo=' + this.sendMsgObj.counterNo,
				});

				const _this = this

				uni.onSocketOpen(function(res) {
					_this.socketConnect = true

					// this.sendMsgObj = {
					//   ...this.sendMsgObj,
					// }
					// uni.sendSocketMessage({
					//   data: JSON.stringify( this.sendMsgObj),
					// })
					// 每10秒发一个心跳
					setInterval(() => {
						uni.sendSocketMessage({
							data: "ping",
						})
					}, 10000)
				});

				uni.onSocketMessage(function(res) {
					const data = JSON.parse(res.data)
					if (data == 'vue调用 连接成功') return

					if (data?.counterOrderFlowDetailList && _this.sendMsgObj.counterNo == data.counterNo) {
						_this.sendMsgObj = data
						_this.choiceDataList = _this.sendMsgObj.counterOrderFlowDetailList

						// 改变原始数据
						_this.dataList = _this.dataList.map(item => {
							item.orderNum = _this.choiceDataList.find(item2 => {
									if (item2.serviceId != -1) return false
									return item2.relaId == item.id
								})
								?.orderNum || 0
							return item
						})
					}
				})
			},
			// 改变单选
			groupChange(e) {
				// 恢复库存
				this.kxTcList = JSON.parse(JSON.stringify(this.kxTcListCopy))
				this.kxTcChoice.forEach(item => {
					const index = this.kxTcList.findIndex(goods => goods.id == item)
					if (index != -1) {
						this.kxTcList[index].productStock -= 1
					}
				})

				console.log(this.kxTcList, "this.kxTcList");
				console.log(this.kxTcChoice, "kxTcChoice");
			},
			// 查看详情
			async handleDetails(item) {
				if (this.typeIndex != -1) return
				const res = await findDetailListApi(item.id)
				console.log(res, "res");
				if (res.code == 200) {
					this.tcList = res.data
					this.$refs.diaBoxRef.show = true
				}
			},
			backHome() {
				uni.switchTab({
					url: "/pages/home/index"
				})
			},
			// 获取登陆信息
			getIsLogin() {
				if (!uni.getStorageSync('token') || (uni.getStorageSync('userInfo') == "null" || !uni.getStorageSync(
						"userInfo"))) {
					// if (!uni.getStorageSync('token')){
					uni.setStorageSync('showLogin', true)
					this.$refs.userLoginRef.showLogin = true
					return false
				}
				return true
			},
			getParamobj(path) { //根据url里的参数，全部转换为obj
				if (path.split("#/?").length > 1) {
					if (path.split("?").length > 1) {
						var params = path.split("?")[1].split("&")
						var obj = {}
						params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
						return obj;
					} else return '';
				} else {
					if (path.split("#").length > 1) {
						path = path.split('#')[0];
					}
					if (path.split("?").length > 1) {
						var params = path.split("?")[1].split("&")
						var obj = {}
						params.map(item => obj[item.split("=")[0]] = item.split("=")[1])
						return obj;
					} else return '';
				}
			},
			// 下单结算
			handleSuc() {
				// this.sendMsgObj = {
				//   ...this.sendMsgObj,
				//   counterOrderFlowDetailList: []
				// }
				// uni.sendSocketMessage({
				//   data: JSON.stringify( this.sendMsgObj),
				// })
				// return
				// let dataList = uni.getStorageSync("choiceDataList")
				let dataList = JSON.parse(JSON.stringify(this.choiceDataList))
				if (dataList) {
					dataList = dataList.filter(item => item.orderNum > 0)
				}
				if (!dataList) return this.$toast("请选择商品")
				if (dataList.length == 0) return this.$toast("请选择商品")
				const sendMsgObj = {
					counterNo: this.sendMsgObj.counterNo,
					counterOrderNo: this.sendMsgObj.counterOrderNo,
					counterDetailId: this.sendMsgObj.counterDetailId,
				}
				uni.setStorageSync("sendMsgObj", sendMsgObj)
				this.getnav("details?counterNo=" + this.counterNo)
			},
			// 获取购物车信息
			getCartInfo() {
				const obj = {
					num: 0,
					price: 0
				}
				if (this.choiceDataList?.length > 0) {
					this.choiceDataList.forEach(item => {
						if (item.serviceId != -1) return
						obj.num += item.orderNum
						obj.price += (item.orderNum * item.unitPrice)
					})
				}

				// 处理price 精度问题
				obj.price = obj.price.toFixed(2)
				return obj
			},
			// 改变购物车列表
			changeChoiceData(item, type) {
				console.log(this.choiceDataList, "this.choiceDataList")
				let obj = this.choiceDataList.find(one => one.relaId == item.id)
				console.log(obj, "obj")
				console.log(item, "item");
				if (type == 1) {
					if (obj) {
						obj = {
							"orderChannel": 1,
							"relaType": item.relaType,
							"relaId": item.id,
							"orderNum": obj.orderNum + 1,
							"serviceId": -1,
							"unitPrice": item.productSellingPrice,
							"totalPrice": item.productSellingPrice * obj.orderNum,
						}
					} else {
						obj = {
							"orderChannel": 1,
							"relaType": item.relaType,
							"relaId": item.id,
							"orderNum": 1,
							"serviceId": -1,
							"unitPrice": item.productSellingPrice,
							"totalPrice": item.productSellingPrice * 1,
						}
						this.choiceDataList.push(obj)
					}
				} else {
					const num = obj.orderNum - 1
					obj = {
						"orderChannel": 1,
						"relaType": item.relaType,
						"relaId": item.id,
						"orderNum": num,
						"serviceId": -1,
						"unitPrice": item.productSellingPrice,
						"totalPrice": item.productSellingPrice * obj.orderNum,
					}
				}

				this.choiceDataList = this.choiceDataList.map(item => {
					if (item.relaId == obj.relaId) {
						return obj
					} else {
						return item
					}
				})


				// 过滤数量为0的
				this.choiceDataList = this.choiceDataList.filter(item => item.orderNum > 0)

				this.sendMsgObj = {
					...this.sendMsgObj,
					counterOrderFlowDetailList: this.choiceDataList
				}
				uni.sendSocketMessage({
					data: JSON.stringify(this.sendMsgObj),
				})

				// uni.setStorageSync("choiceDataList", this.choiceDataList)
			},
			// 增加
			async handleIncrease(item) {
				console.log(item, "item");
				console.log(this.choiceDataList, "之前")
				if (item.orderNum >= item.productStock) return this.$toast("当前库存不足")
				// 如果是套餐
				if (this.typeIndex == -1) {
					console.log(item.optionalProductTypeId, "item.optionalProductTypeId");
					if (item.optionalProductTypeId != null && item.optionalProductTypeId != 0) {
						// 判断是否已经被选了
						if (this.choiceDataList.findIndex(choice => choice.relaId == item.id) != -1) {
							item.orderNum += 1
							// 找到这个套餐的小商品，数量+1
							this.choiceDataList = this.choiceDataList.map(choice => {
								if (choice.serviceId == item.id) {
									choice.orderNum = item.orderNum
								}
								return choice
							})
							console.log(this.choiceDataList, "增加之后")
							this.changeChoiceData(item, 1)
						} else {
							// 弹窗
							const res = await listForPadApi(item.optionalProductTypeId)
							if (res.code == 200) {
								this.kxTcList = res.data
								this.kxTcListCopy = JSON.parse(JSON.stringify(this.kxTcList))
								console.log(this.kxTcList, "kxTcList");
								this.showDia = true
								this.curItem = item
								// 初始化一个item.optionalProductNum长度的空数组
								this.kxTcChoice = Array(item.optionalProductNum).fill(res.data[0].id)
							}
						}

					} else {
						item.orderNum += 1
						this.changeChoiceData(item, 1)
					}
				} else {
					item.orderNum += 1
					this.changeChoiceData(item, 1)
				}
			},
			// 减少商品
			handleDecrease(item) {
				if (item.orderNum == 0) return
				item.orderNum -= 1

				// 删除套餐下的所有已选商品中serviceId为item.id的 数量全部减少1
				this.choiceDataList.forEach(choice => {
					if (choice.serviceId == item.id) {
						console.log(choice.orderNum, " choice.orderNum")
						choice.orderNum -= 1
						console.log("剪完了", choice.orderNum)
					}
				})
				console.log(this.choiceDataList, "this.choiceDataList")

				this.changeChoiceData(item, 2)

			},
			// 初始化选中列表
			async initData() {
				const res = await getCarListApi(this.sendMsgObj)
				if (res.code == 200) {
					this.choiceDataList = res.data.counterOrderFlowDetailList
					await this.getTypeList()
				}
			},
			// 获取套餐列表
			async clickTaoCan() {
				this.typeIndex = -1
				const res = await getTCGoodsListApi()
				if (res.code == 200) {
					this.dataList = res.data.map(item => {
						const choice = this.choiceDataList.find(choice => choice.relaId == item.id)
						return {
							id: item.id,
							relaType: 2,
							packageProductNames: item.packageProductNames,
							packageName: item.packageName,
							optionalProductNum: item.optionalProductNum,
							optionalProductTypeId: item.optionalProductTypeId,
							productSellingPrice: item.packageSellingPrice,
							productName: item.packageName,
							productPicPath: item.packagePicPath,
							orderNum: choice?.orderNum ? choice.orderNum : 0,
						}
					})
				}
			},
			// 获取类型列表
			async getTypeList() {
				const res = await getGoodsTypeListApi()
				if (res.code == 200) {
					this.typeList = res.data
					await this.getGoodsList(this.typeIndex)
				}
			},
			// 获取商品列表
			async getGoodsList(index) {
				if(index === -1) return
				const data = {
					typeId: this.typeList[index].id
				}
				this.typeIndex = index
				const res = await getGoodsListApi(data)
				if (res.code == 200) {
					this.dataList = res.data.map(item => {
						let choice
						if (this.choiceDataList.length > 0) {
							choice = this.choiceDataList.find(choice => choice.relaId == item.id)
						}
						console.log(choice, "choice")
						return {
							...item,
							relaType: 1,
							orderNum: choice?.orderNum ? choice.orderNum : 0,
						}
					})

				}
			},
			// 点击选择框
			handleRadio(index, id) {
				this.kxTcChoice[index] = id
				// 强制渲染dom
				this.$forceUpdate()
			},
			getIsChecked(index, id) {
				return this.kxTcChoice[index] == id
			}
		}
	}
</script>

<style lang="scss" scoped>
	.price-text {
		text-align: center;
		margin-top: 20rpx;
		color: #fff;
	
		text {
			color: #0FC6C2;
			margin: 0 5rpx;
		}
	}
	.my-btns{
		display: flex;
		.btn1{
			margin-right: 10rpx;
		}
		
	}
	.diaBoxInner {
		background-color: rgba(0, 0, 0, 0.8);
	}

	.diaboxTc {
		background-size: 100% 100%;
	}

	.btns {
		width: 100%;
		display: flex;
		justify-content: space-between;
		margin-top: 50rpx;
		margin-bottom: 20rpx;

		.btnOut {
			flex: 1;
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(195, 200, 203, 0.25);
			margin-right: 50rpx;
			height: 90rpx;

			&:last-child {
				margin-right: 0;
			}

			.btn {
				background-color: #B3B4C3;
			}
		}

		.btnOut2 {
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);

			.btn {
				background: #2cb3af;
			}
		}

		.btn {
			width: 100%;
			font-weight: 600;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 90rpx;
			text-align: center;
			border-radius: 64rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
		}
	}

	.cont {
		padding: 0 72rpx;
		// background-image: linear-gradient(to bottom, #13191a, #000);

		.items {
			width: 100%;
			padding-top: 20rpx;
			height: 40vh;
		}

		.list {
			// margin-top: 50rpx;
			// border: 2rpx solid #4e7675;
			// background-color: #33333b;
			// background:  linear-gradient(145deg, rgba(4,208,193,0.34), rgba(8, 16, 16, 0.5)); /* 渐变背景 */
			border-radius: 30rpx;
			padding: 30rpx 30rpx 0;

			.listOne {
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				padding-bottom: 15rpx;
				padding: 0 20rpx;
				position: relative;
				height: 90rpx;

				&:last-child {
					border-bottom: none;
					padding-bottom: 0rpx;
				}

				.icon {
					position: absolute;
					right: 30rpx;
					top: 50%;
					transform: translateY(-50%);
					width: 40rpx;
					height: 40rpx;

					.realRedio {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						z-index: 99;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.disableBox {
						width: 40rpx;
						height: 40rpx;
						position: absolute;
						z-index: 99;
					}
				}

				text {
					color: #fff;
					display: flex;
					align-items: center;
				}

				image {
					width: 64rpx;
					height: 64rpx;
					margin-right: 20rpx;
				}
			}

			.active {
				background: linear-gradient(270deg, rgba(15, 198, 194, 0.1) 0%, #0FC6C2 100%);
				border-radius: 24rpx;
				border: 2rpx solid #0FC6C2;
			}
		}

		.itemInner {
			padding: 20rpx;
			// border: 2rpx solid #4b6566;
			background-size: 100% 100%;
			// background: linear-gradient(145deg, #539e9d, #121819);
			/* 渐变背景 */
			background: linear-gradient(137deg, rgba(34, 229, 227, 0.2) 0%, rgba(15, 198, 194, 0) 100%);
			border-radius: 25rpx;
			border: 1rpx solid;
			border-image: linear-gradient(131deg, rgba(222, 255, 254, 0.12), rgba(169, 255, 254, 0.3), rgba(20, 199, 196, 0), rgba(168, 255, 254, 0.17)) 0 0;
			backdrop-filter: blur(26px);
		}

		.item {
			border-bottom: 2rpx solid #4a4e4d;
			// background: linear-gradient(145deg, rgba(59,202,191,0.5), rgba(8, 16, 16, 0.5)); /* 渐变背景 */

			display: flex;
			flex-direction: column;
			position: relative;
			z-index: 999;
			padding: 30rpx 30rpx;

			// margin-bottom: 30rpx;
			&:last-child {
				border: none;
			}

			.title {
				display: flex;
				align-items: center;

				text {
					color: #fff;
				}

				image {
					width: 64rpx;
					height: 64rpx;
					margin-right: 20rpx;
				}

				.icon {
					position: absolute;
					right: 30rpx;
					top: 50rpx;
					transform: translateY(-50%);
				}

				.rotate {
					transform: rotate(180deg);
				}
			}

		}

		.fiexItem {
			border-radius: 30rpx;
			// border: 2rpx solid #4e7675;
			//background: #2c4f4f;
			// box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* 阴影效果 */
			// background: linear-gradient(145deg, rgba(59,202,191,0.5), rgba(8, 16, 16, 0.5)); /* 渐变背景 */
			background-size: 100% 100%;
			display: flex;
			position: relative;
			top: -50rpx;
			z-index: 999;
			padding: 30rpx 30rpx;

			.img {
				margin-right: 20rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					border-radius: 20rpx;
				}
			}

			.text {
				.tit {
					font-weight: 500;
					font-size: 36rpx;
					color: #FFFFFF;
					line-height: 36rpx;
					text-align: left;
				}

				.desc {
					margin-top: 10rpx;
					font-size: 28rpx;
					color: #0FC6C2;
					line-height: 48rpx;
				}
			}
		}

	}

	.header {
		display: flex;
		justify-content: space-between;
		height: 226rpx;
		// background-image: linear-gradient(to bottom, #336866, #13191a);
		// opacity: 0.46;
		// filter: blur(50px);
		padding: 44rpx 72rpx;
		position: relative;
		border-radius: 40rpx 40rpx 0 0;

		.left {
			display: flex;
			flex-direction: column;

			text {
				&:nth-child(1) {
					font-weight: 600;
					font-size: 48rpx;
					color: #FFFFFF;
					line-height: 48rpx;
					text-align: center;
					font-style: normal;
					margin-bottom: 8rpx;
				}

				&:nth-child(2) {
					font-weight: 600;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 32rpx;
					text-align: left;
					font-style: normal;
					text-transform: uppercase;
					color: #5e8784;
				}
			}
		}

		.tag {
			width: 76rpx;
			height: 40rpx;
			background: #FF9A2E;
			border-radius: 14rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 16rpx;

			text {
				font-weight: 400;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.img {
			position: absolute;
			right: 44rpx;
			top: -100rpx;

			image {
				width: 250rpx;
			}
		}
	}

	.diaCont {
		margin-top: 52rpx;

		.bgBox {
			width: 100vw;
			height: 100vh;
			position: fixed;
			z-index: 1;
			background: rgba(0, 0, 0, 0.6);
		}

		.items {
			border-radius: 22rpx;
			border: 2rpx solid #979797;
			overflow: hidden;


		}

		.items {
			margin-top: 30rpx;

			.item {
				padding: 0 68rpx;
				display: flex;
				justify-content: space-between;
				font-weight: 400;
				font-size: 28rpx;
				line-height: 32rpx;
				text-align: center;
				font-style: normal;
				color: #fff;
				margin: 0 !important;
				line-height: 84rpx;

				&:nth-child(2n) {
					background: #2d2e33;
				}
			}

			.one {
				color: #86909C;
			}
		}

		.diaBox {
			background: rgba(38, 42, 74, 0.8);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #5D617E;
			width: 90vw;
		}

		.item {
			display: flex;
			justify-content: space-between;
			padding: 40rpx;
			margin-bottom: 18rpx;
			box-sizing: border-box;
			background-size: 100% 100%;
		}
	}

	.footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 180rpx;
		padding: 0 20rpx;
		position: relative;
		z-index: 9;
		background: rgba(0, 0, 0, 0.6);
		border-image: linear-gradient(164deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.16)) 2 2;

		.left {
			display: flex;

			.price {
				font-size: 36rpx;
				margin-left: 50rpx;
				display: flex;
				align-items: center;

				text {
					font-weight: 500;
					font-size: 41rpx;
					color: #FFFFFF;
					line-height: 59rpx;
					text-align: left;
					font-style: normal;
				}
			}

			.cart {
				position: relative;

				.circle {
					position: absolute;
					right: 0;
					top: 0;
					width: 26rpx;
					height: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					background: #FF6048;
					border-radius: 50%;
					box-shadow: inset 0rpx 0rpx 12rpx 0rpx rgba(255, 255, 255, 0.5);

					text {
						font-size: 18rpx;
						color: #fff;
					}
				}
			}

			image {
				width: 76rpx;
			}
		}

		.btnOut {
			border-radius: 64rpx;
			box-shadow: 0rpx 0rpx 40rpx 38rpx rgba(15, 198, 194, 0.25);
		}

		.btn {
			width: 180rpx;
			height: 70rpx;
			box-shadow: inset 0rpx 14rpx 34rpx 0rpx #FFFFFF;
			border-radius: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background: #2bafad;

			text {
				font-size: 28rpx;
				color: #fff;
			}
		}
	}


	.content {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex: 1;
		z-index: 9;
		min-height: 0;
		background: rgba(0, 0, 0, 0.6);
		padding-top: 38rpx;
		box-sizing: border-box;

		.right {
			flex: 1;
			min-height: 0;
			margin-left: 18rpx;
			display: flex;
			flex-direction: column;

			.searchBox {
				margin-bottom: 20rpx;
			}

			.items {
				flex: 1;
				min-height: 0;

				.item {
					padding: 30rpx;
					margin-bottom: 18rpx;
					display: flex;
					background-size: 100% 100%;
					background: linear-gradient(270deg, rgba(15, 198, 194, 0) 0%, rgba(15, 198, 194, 0.37) 100%);
					border-radius: 25rpx;
					border: 1rpx solid;
					backdrop-filter: blur(41px);
					border-image: linear-gradient(270deg, rgba(223, 255, 255, 0.11), rgba(231, 255, 255, 0), rgba(248, 255, 255, 0.25)) 0 0;

					image {
						width: 120rpx;
						height: 120rpx;
						margin-right: 20rpx;
						border-radius: 20rpx;
					}

					.info {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						padding: 10rpx 0;
						margin-left: 36rpx;

						.title {
							font-size: 36rpx;
							color: #fff;
						}

						.price {
							font-weight: 500;
							font-size: 28rpx;
							color: #0FC6C2;
							line-height: 28rpx;
							text-align: left;
							font-style: normal;
							display: flex;
							justify-content: space-between;

							image {
								width: 36rpx;
								margin: 0 !important;
							}
						}
					}
				}
			}

		}

		.left {
			width: 168rpx;
			background: rgba(0, 0, 0, 0.22);
			border-radius: 0rpx 36rpx 0rpx 0rpx;
			border: 2rpx solid #233235;
			overflow: hidden;
			backdrop-filter: blur(7px);

			.item {
				line-height: 80rpx;
				font-weight: 400;
				font-size: 28rpx;
				color: #86909C;
				font-style: normal;
				text-align: center;
			}

			.active {
				background: linear-gradient(270deg, #0FC6C2 0%, rgba(15, 198, 194, 0) 100%);
				opacity: 0.62;
				color: #fff;
			}
		}
	}


	.left-slot {
		color: #fff;
		display: flex;
		align-items: center;

		.left-slot {
			color: #fff;

			image {
				width: 40rpx;
				margin-right: 30rpx;
			}
		}

		image {
			width: 40rpx;
			margin-right: 30rpx;
		}
	}

	.innerBox {
		display: flex;
		flex-direction: column;
		height: 100vh;
		min-height: 0;
	}

	.outBox {
		background-color: #1d1e2e;
		display: flex;
		flex-direction: column;
		height: 100vh;
		min-height: 0;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 38rpx;
		width: 100%;
		box-sizing: border-box;

		.name {
			color: #fff;
		}
	}

	video {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 确保视频填充整个容器，可能会裁剪视频 */
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 0;
	}

	.operation {
		display: flex;
		align-items: center;

		text {
			width: 50rpx;
			text-align: center;
		}
	}
</style>